<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				outline: none;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			/*box的大小与基本样式*/
			.box{
				position: relative;
				margin:  auto;
				margin-top: 60px;
				height: 700px;
				width: 900px;
				background: #fff;
				box-shadow: 1px 2px 15px -2px blue;
			}
			.left{
				width: 65%;
				height: 100%;
				float: left;
			}
			.right{
				width: 35%;
				height: 100%;
				background: blueviolet;
				position: absolute;
				float: left;
				right: 0;
				background: url(img/signup.jpg);
				outline: none;
			}
			/**/
			
			/*box_left的内容样式*/
			h2{
				text-align: center;
				font-family:  "agency fb";
				font-size: 40px;
			}
			#h2{
				margin-top:50px ;
				width: 100%;
				height: 50px;
			}
			#ul_li{
				width: 100%;
				height: 100%;
			}
			
			/*input样式*/
			ul{
				list-style: none;
			}
			.box_input{
				width: 450px;
				padding: 30px;
				background-color: #fff;
			}
			.input{
				width: 100%;
				height: 35px;
				position: relative;
			}
			.box_input .input input{
				width: 100%;
				height: 100%;
				border: none;
				border-bottom: 2px solid #000;
				font-size: 1rem;
			}
			.box_input .input label{
				position: absolute;
				left: 0;
				bottom: 10px;
				color: green;
				pointer-events: none;
				transition: 0.5s;
			}
			input:valid{
				color: black;
			}
			.box_input .input input:focus~label,
			.box_input .input input:valid~label{
				transform: translateY(-20px);
				color: red;
				font-size: 12px;
			}
			/**/
			
			/*button样式*/
			button{
				margin-top: 20px ;
				width: 400px;
				height: 50px;
				border-radius: 50px;
				background: linear-gradient(120deg, #ffadc5 0%, #c2f4ff 100%) no-repeat;
				border: none;
			}
			/**/
			
			/*a标签样式*/
			#link_a,#link_a a{
				text-decoration: none;
				margin-top: 20px;
				color: #000;
			}
			/**/
			/*img样式*/
			img{
				width: 40px;
				height: 40px;
				margin-left: 18px;
				margin-right: 18px;
				margin-top: 40px;
			}
			/***/
			/*box_right样式*/
			.right_top{
				width: 100%;
				height: 40px;
				text-align: center;
				margin-top:50px ;
				color: white;
			}
			h5{
				font-size: 2rem;
			}
			.right_middle{
				width: 100%;
				text-align: center;
				font-size: 1.2rem;
				color: white;
				margin-top: 70px;
			}
			.donghua{
				margin: auto;
				margin-top: 150px;
				border: 2px solid white;
				border-radius: 30px;
				width: 100px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				color: white;
			}
			.right_bottom{
				position: absolute;
				right: 10px;
				bottom: 10px;
				color: white;
				font-size: 25px;
			}
			.donghua{
				animation: 0.5s linear 1s infinite alternate myframes;
			}
			@-webkit-keyframes myframes{
				from{transform: scale(1.5);}
				to{transform: scale(1);}
			}
		</style>
	</head>
	<body >
		<div class="box">
			<div class="left">
				<div id="h2">
				<h2>Sign Up</h2>
				</div>
				<div id="ul_li">
					<center>
					<ul>
						<li>
							<div class="box_input">
								<div class="input">
									<input type="text" required="" /><br />
									<label>name</label>
								</div>
							</div>
						</li>
						<li>
							<div class="box_input">
								<div class="input">
									<input type="email" required="" /><br />
									<label>email address</label>
								</div>
							</div>
						</li>
						<li>
							<div class="box_input">
								<div class="input">
									<input type="password" required="" /><br />
									<label>password</label>
								</div>
							</div>
						</li>
						<li>
							<div class="box_input">
								<div class="input">
									<input type="password" required="" /><br />
									<label>confirm password</label>
								</div>
							</div>
						</li>
						<li>
							<button>SIGN IN</button>
						</li>
						<li>
							<div id="link_a">
								<a href="javascript:;">Forgot Password?</a>
							</div>
						</li>
						<li id="img_link">
							<span>
								<a href="javascript:;"><img src="img/wechat.png" /></a>
								<a href="javascript:;"><img src="img/qq.png" /></a>
								<a href="javascript:;"><img src="img/github.png" /></a>
								<a href="javascript:;"><img src="img/sina.png" /></a>
							</span>
						</li>
					</ul>
					</center>
				</div>
			</div>
			<div class="right">
				<div class="right_top">
					<h5>One&nbsp;of&nbsp;us?</h5>
				</div>
				<div class="right_middle">
					<p>
					If&nbsp;you&nbsp;already&nbsp;has&nbsp;an&nbsp;account,<br />
					just&nbsp;sign&nbsp;in.&nbsp;We've&nbsp;missed&nbsp;you!
					</p>
				</div>
				<div class="donghua">
					<p>Sign&nbsp;In</p>
				</div>
				<div class="right_bottom">
					小红书
				</div>
			</div>
		</div>
	</body>
</html>
